<template>
	<div class="show-get-gift" ref="slider" @click.stop>
		<div ref="sliderGroup" class="get-gift-lists" :style="{width: gifts.length * 100 + '%'}">
			<ul v-for="(items, index) in gifts" :key="index">
				<li v-for="(item, cindex) in items" :key="cindex" @click="pay(item)">
					<img :src="item.litpic" />
					<span v-show="!anchor.roomid">{{toInt(getReceiveNum(item.id))}}个</span>
					<div v-show="anchor.roomid">
						<span>{{item.name}}</span>
						<span>{{toInt(item.price)}}章鱼丸</span>
					</div>
				</li>
			</ul>
		</div>
		<div v-if="gifts.length > 1" class="dots">
			<span class="dot" :class="{active: currentPageIndex === index }" v-for="(item, index) in gifts" :key="index"></span>
		</div>
	</div>
</template>

<script>/*
	import BScroll from "better-scroll";
	import $animation from "@/utils/live_animation.js";
	import {
		getGiftReceiveLists,
		getGiftLists
	} from "@/api.js";
	import {
		Toast,
		MessageBox
	} from "mint-ui";
	import {
		getGuid
	} from "@/utils/index";
	import {
		getChatroomUser
	} from "@/utils/nimChat.js";
	export default {
		props: {
			anchor: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				gifts: [],
				scrollGift: null,
				userInfo2: null,
				giftReceiveLists: null,
				currentPageIndex: 0
			};
		},
		methods: {
			toInt(num) {
				return parseFloat(num).toFixed();
			},
			_onScrollEnd() {
				let pageIndex = this.scrollGift.getCurrentPage().pageX
				this.currentPageIndex = pageIndex
			},
			getReceiveNum(_id) {
				return this.giftReceiveLists && this.giftReceiveLists[_id] !== undefined ? this.giftReceiveLists[_id].price : 0;
			},
			setReceiveNum(_id, num) {
				if (this.giftReceiveLists) {
					if (this.giftReceiveLists[_id].num === undefined) {
						this.giftReceiveLists[_id] = {
							num: 0
						};
					}
					this.giftReceiveLists[_id].num += num;
				}
			},
			buy(gift) {
				if (this.anchor) {
					var password = localStorage.pay_password;
					if (!password) {
						MessageBox.prompt('输入支付密码').then(res => {
							this.pay(res.value, gift);
						});
					} else {
						this.pay(password, gift);
					}
				}
			},
			pay(password, gift) {
				giveGiftPay({
					'password': password,
					'id': gift.id,
					'accid': this.anchor.accid,
					'machine_id': getGuid(),
					"token": this.userInfo2.token,
					"version": "H3.0.0"
				}).then(res => {
					if (res.data.code == 200) {
						localStorage.pay_password = password;
						switch (gift.name) { //支付成功播放动画
							case '火箭':
								$animation.rocket();
								break;
							case '玫瑰花':
								$animation.rose();
								break;
							case '霓虹跑车':
								$animation.ferrari();
								break;
						}
					} else {
						Toast({
							message: res.data.msg,
							duration: 2000
						});
					}
				});
			}
		},
		mounted() {
			this.userInfo2 = JSON.parse(localStorage.userInfo2);
			getGiftLists({
				machine_id: getGuid(),
				"token": this.userInfo2.token,
				"version": "H3.0.0"
			}).then(res => {
				if (res.data.code == 200) {
					this.gifts = [];
					var _array;
					while ((_array = res.data.data.data.splice(0, 8)) && _array.length > 0) {
						this.gifts.push(_array);
					}
					setTimeout(() => {
						this.scrollGift = new BScroll(this.$refs.slider, {
							scrollX: true,
							scrollY: false,
							momentum: false,
							snap: {
								loop: false,
								threshold: 0.3,
								speed: 400
							},
							bounce: false,
							click: true,
							probeType: 1
						});
						this.scrollGift.on('scrollEnd', this._onScrollEnd)
					}, 50);
				} else {
					MessageBox.alert(res.data.msg);
				}
			});
		},
		watch: {
			anchor() {
				if (this.anchor === null) {
					return;
				}
				//不是为主播端
				if (this.anchor.roomid) {
					getChatroomUser(this.anchor.roomid, [this.anchor.roomid], (err, obj) => {
						console.info(arguments);
					});
				} else {
					getGiftReceiveLists({
						machine_id: getGuid(),
						"token": this.userInfo2.token,
						"version": "H3.0.0"
					}).then(res => {
						if (res.data.code == 200) {
							this.giftReceiveLists = {};
							res.data.data.all.data.forEach(item => {
								this.giftReceiveLists[item.id] = item;
							});
						}
					});
				}
			}
		},
		destroyed() {
			if (this.scrollGift) {
				this.scrollGift.destroy();
				this.scrollGift = null;
			}
		}
	}*/
</script>

<style>
	.show-get-gift {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		height: 4.5rem;
		width: 100%;
		z-index: 10;
	}

	.show-get-gift ul {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		flex-flow: row wrap;
		align-content: flex-start;
	}

	.show-get-gift ul li {
		box-sizing: border-box;
		border: 1px white solid;
		width: 25%;
		height: 50%;
		border-width: 0px 1px 1px 0px;
		display: flex;
		justify-content: space-around;
		flex-flow: column;
		align-items: center;
		font-size: 0.2rem;
		color: white;
	}

	.show-get-gift ul li img {
		width: 70%;
	}

	.show-get-gift ul li span {
		display: block;
		text-align: center;
	}

	.get-gift-lists {
		white-space: nowrap;
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-content: space-between;
		flex-flow: row nowrap;
		left: 0;
		top: 0;
		right: 0;
		bottom: 1rem;
		margin: auto;
		overflow: hidden;
	}

	.show-get-gift .dots {
		position: absolute;
		bottom: 0rem;
		width: 100%;
		height: 1rem;
		text-align: center;
		line-height: 1rem;
	}

	.show-get-gift .dots span {
		display: inline-block;
		height: 0.2rem;
		width: 0.2rem;
		border-radius: 50%;
		background-color: #0B0C19;
		margin: 0 0.1rem;
	}

	.show-get-gift .dots span.active {
		background-color: #FFFFFF;
	}
</style>
